<template>
  <div class="navshow">
    <div class="main_search">
      <div class="search_c">
        <input type="text"  v-model="input" @input="handSearch" placeholder="请输入你想要查找的专业以及学校信息">
        <button @click="toSchoolItem" ><i class="fa fa-search fa-2x"></i></button>
      </div>
      <div class="itemFather">
        <ul class="search_output" v-if="isShowItem">
          <p >您可能想要找的是:</p>
          <p v-if="isShowData">学校:</p>
          <li v-for="(items, index) in data" :key="index">
            <span @click="handJumpSch(items.name)">{{items.name}}</span>  
          </li> 
            <p v-if="isShowData2">专业:</p>
          <li v-for="(items, index) in data2" :key="index">
            <span @click="handJumpPro(items.name)">{{items.name}}</span>  
          </li> 
        </ul>
      </div>
    </div>   
  </div>
</template>

<script>
import {request}  from '../../../network/axios';
import axios from 'axios';
export default {
  name:'navshow',
  data(){
    return{
      input:'',
      data:[],
      data2:[],
      isShowData:false,
      isShowData2:false,
      isShowItem: true,
    }
  },
  methods:{
    handInput(){
      console.log(1)
    },
    handSearch () {
      axios.all([
        request({
          url: 'searchSch',
          method: 'POST',
          data: {
            content: this.input
          }
        }),
        request({
          url: 'searchPro',
          method: 'POST',
          data: {
            content: this.input
          }
        }),
      ]).then(axios.spread((res1, res2) => {
        this.isShowData1 = true;
        this.data = res1.data;
        this.data2 = res2.data;
          if(this.data.length != 0 && this.data2.length !=0) {
            this.isShowItem = true;
            this.isShowData2 = true;
            document.getElementsByClassName('search_output')[0].style.height = `${(this.data.length+this.data2.length)*35 + 70}px`;
          }else if(this.data.length != 0 && this.data2.length == 0){
            this.isShowData = true;
            document.getElementsByClassName('search_output')[0].style.height = `${this.data.length*40 + 60}px`;
          }else if(this.data.length == 0 && this.data2.length != 0){
            this.isShowData2 = true;
            document.getElementsByClassName('search_output')[0].style.height = `${this.data2.length*40 + 60}px`;
          }else{
            document.getElementsByClassName('search_output')[0].style.height = 0;
            this.isShowData2 = false;
            this.isShowData = false;
          }
      })).catch(err => {
        console.log(err);
      })
    },
    handJumpSch (name) {
      this.$router.push({path:'/sch/home', query:{ name }})
      this.isShowItem = false;
    },
    handJumpPro (name) {
      this.$router.push(`/pro?name=${name}`)
      this.isShowItem = false;
    },
    toSchoolItem (e) {
      this.$router.push({path:'/sch/home', query: { name: e.target.value }})
    }
  },
  watch:{
    input(newName,oldName) {
      
    }
  }
  
}
</script>

<style>
.navshow{
  height: 500px;
  position: relative;
  width: 1400px;
  margin: 0 auto;
  background-image: url(../../../assets/img/temfile/schoo.jpeg);
}
/* .navshow p{
  font-size: 35px;
  font-family: 'xin';
  color: rgb(5, 38, 117);text-align: center;
  position: relative;
} */
/* .search_c{
  position: absolute;
  left: 50%;
  top: 110px;
  transform: translate(-50%, -50%);
} */
.main_search input{
  height: 50px;
  width: 800px;
  min-width: 200px;
  width: 90%;
  border:unset;
  border-radius:55px;
  background-color: white;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
  font-size: 16px;
  padding-left: 20px;
  font-weight:500;
  /* font-family: 'xin'; */
  color: black;
  /* box-sizing: border-box; */
}
.main_search button{
  height: 52px;
  width: 50px;
  border: unset;
  outline: none;
  position: absolute;
  right: -10px;
  border-top-right-radius: 55px;
  border-bottom-right-radius: 55px;
  background-color:white;
}
.main_search i{
  color: grey;
}
.main_search button:hover i{
  color: rgb(65, 211, 21);
 
  
}
.main_search {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  min-width: 400px;
  width: 40%;
  /* background-color: aquamarine; */
  /* margin: 0 auto; */
}
.yanyu2{
  margin-top: 20px;
}
.yanyu2 p:nth-of-type(2){
  margin: 10px;
  margin-left: 100px;
}
.yanyu1{
  position: absolute;
  top: 20px;
  left: 120px;
  width: 20px;
}
.yanyu3{
  position: absolute;
  top: 60px;
  left: 190px;
  width: 20px;
}
.itemFather {
  /* height: 270px;
  overflow: scroll; */
}
.search_output{
  position: absolute;
  width: 800px;
  min-width: 200px;
  width: 90%;
  left: 30px;
  /* top: 500px /; */
  z-index: 9999 !important;
  /* border: 1px solid rgba(83, 77, 77, 0.281); */
  border-radius: 15px;
  overflow: hidden;
  background-color: rgba(15, 15, 11, 0.459);
  text-align: center;
  /* box-shadow:0  10px 10px 4px gray;  */
  height: 0;
  transition: all ease-in .5s;
}
.search_output>li{
  height: 30px;
  width: 90%;
  margin: 5px auto;
  border-radius: 10px;
  padding-left: 10px;
  cursor: pointer;
}
.search_output span{
  display: block;
  height: 100%;
  width: 90%;
  text-align: start;
  color:white;
  line-height: 30px;
}
.search_output>li:hover , search_output span{
  background-color: rgb(18, 49, 134);
}
.search_output p{
  color: rgb(42, 165, 93);
  font-family: 'Courier New', Courier, monospace;
  text-align: start;
  font-size: 14px;
  margin-left: 5px;
}
</style>